<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      input {
        outline: none;
      }
      span {
        color: red;
        display: none;
      }
      .active {
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <!-- - 当每个input输入结束，直接检测 (onblur)
- 姓名要求，*4到16位，字母，数字，下划线，减号*
- 密码要求，*8到15位，字母，数字或下划线字符*
- 如果输入不对，在各自input的下方，输出错误信息
- 如果输入正确，则不显示信息，并且如果之前有错误信息，则清除。
- send按钮，在检测没有全部完成前，不能触发点击事件。 (disabled) -->
    <nav>
      姓名: <input type="text" id="text" /><span class="span1"
        >请输入4到16位,字母,数字,下划线,减号</span
      >
      <br />
      密码: <input type="password" id="password" /><span class="span2"
        >请输入8到15位,字母,数字或下划线字符</span
      ><br />
      <button disabled>send</button>
      <script>
        // 获取元素
        let text = document.querySelector("#text");
        let password = document.querySelector("#password");
        let button = document.querySelector("button");
        let span1 = document.querySelector(".span1");
        let span2 = document.querySelector(".span2");
        let textflag = false;
        let passwordflag = false;
        text.addEventListener("blur", function () {
          let reg = /^[a-z0-9_-]{4,16}$/;
          let value = this.value;
          textflag = reg.test(value);
          if (reg.test(value)) {
            span1.classList.remove("active");
            span1.classList.add("red");
          } else {
            button.disabled = true;
            span1.classList.add("active");
          }
          if (!value) {
            span1.innerHTML = "不能为空";
          }
          //   判断结果
          flag();
        });
        password.addEventListener("blur", function () {
          let reg = /^\w{8,15}$/;
          let value = this.value;
          passwordflag = reg.test(value);
          if (reg.test(value)) {
            span2.classList.remove("active");
            span2.classList.add("red");
          } else {
            button.disabled = true;
            span2.classList.add("active");
          }
          if (!value) {
            span1.innerHTML = "不能为空";
          }
          //   判断结果
          flag();
        });
        function flag() {
          button.disabled = !(textflag && passwordflag);
        }
      </script>
    </nav>
  </body>
</html>
